<template>
  <div>
    <div class="cart-header">
      <div class="head">
        <i @click="panshouye" class="fi iconfont icon-fanhui" aria-hidden="true"></i>
        <p>
          <!-- 接收内容 -->
          <slot name="headname"></slot>
        </p>
        <i @click="panshow" class="fi2 iconfont icon-ellipsis2" aria-hidden="true"></i>
        <ul class="cart-header-nav" v-show="pan">
          <span class="triangle"></span>
          <li v-for="item in navshuju" :key="item.navname" @click="panpush(item.path)">
            <div class="nav-f fl">
              <span :class="[item.item]"></span>
            </div>
            <div class="nav-l fl" v-cloak>{{item.navname}}</div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      navshuju: [
        {
          navname: "首页",
          item: "shouye iconfont icon-shouye",
          path: "/home"
        },
        {
          navname: "分类",
          item: "fenlei iconfont icon-fenlei",
          path: "/classify"
        },
        {
          navname: "购物车",
          item: "gouwuche iconfont icon-gouwuche",
          path: "/cart"
        },
        {
          navname: "我的",
          item: "shouye iconfont icon-wode",
          path: "/mine"
        }
      ],
      pan: false
    };
  },
  methods: {
    panshow() {
      this.pan = !this.pan;
    },
    panpush(path) {
      this.pan = !this.pan;
      this.$router.push(path);
    },
    panshouye() {
      this.$router.push("/home");
    }
  }
};
</script>
<style scoped lang="scss">
@function vw($px) {
  @return ($px / 375) * 100vw;
}
.cart-header {
  border-bottom: vw(1) solid #f2f2f2;
  .head {
    font-size: vw(16);
    height: vw(46);
    margin: 0 vw(17);
    display: flex;
    justify-content: space-between;
    position: relative;
    align-items: center;

    .fi {
      font-size: vw(20);
      color: #5f616c;
    }
    .fi2 {
      font-size: vw(30);
      color: #5f616c;
    }
    .cart-header-nav {
      position: absolute;
      z-index: 1;
      top: vw(52);
      right: 0;
      width: vw(130);
      height: vw(160);
      background-color: rgba(0, 0, 0, 0.9);
      border-radius: vw(4);
      .triangle {
        position: absolute;
        top: vw(-10);
        left: vw(110);
        border: vw(5) solid transparent;
        border-bottom-color: #000;
      }
      li {
        .nav-f {
          text-align: center;
          line-height: vw(39);
          width: vw(39);
          height: vw(39);
          .shouye {
            color: #fff;
            font-size: vw(14);
          }
          .fenlei {
            color: #fff;
            font-size: vw(18);
          }
          .gouwuche {
            color: #fff;
            font-size: vw(18);
          }
        }
        .nav-l {
          width: vw(90);
          height: vw(39);
          line-height: vw(39);
          color: #fff;
          font-size: vw(14);
          border-bottom: vw(1) solid #333;
        }
      }
    }
  }
}
</style>